<template>
  <view class="container">
    <!-- yi -->

    <uni-swipe-action v-if="getRecordItem.length !== 0">
      <view class="my_pet" v-for="(item,i) in getRecordItem" :key="i">
        <uni-swipe-action-item :right-options="options" @click="bindClick(i)">
          <view class="my_pet_box">
            <view class="my_pet_box_img" @click="navTo('/subpkg/ldentity/ldentity?id=' + item.id)">
              <image v-if="item.previewImage" class="my_pet_box_image" :src="item.previewImage" mode="aspectFill"></image>
              <image v-else class="my_pet_box_image" src="http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210617/a1b0aedabc466612a506a75eda513e72.png" mode="aspectFill"></image>
              <view class="my_pet_box_title">
                <view class="my_pet_box_title_top">
                  <h1>{{item.productName}}</h1>
                  <image v-if="item.sex === '0'" src="/static/images/mine/nan.png" mode="aspectFill"></image>
                  <image v-else src="/static/images/mine/nv.png" mode="aspectFill"></image>
                </view>
                <view class="my_pet_box_title_bottom">
                  <text>{{item.ageStr}} ｜ {{item.category.categoryName}}</text>
                </view>
              </view>
            </view>
            <!-- <van-icon name="edit" size="26" @click="navTo('/subpkg/newrecord/newrecord?id=' + item.id)" /> -->
            <image src="/static/images/mine/edit.png" mode="widthFix" class="my_pet_box_edit"
              @click="navTo('/subpkg/newrecord/newrecord?id=' + item.id)"></image>
          </view>

        </uni-swipe-action-item>
      </view>
    </uni-swipe-action>

    <!-- 没有商品 -->
    <view class="nodetails" style="height: 510px" v-if="getRecordItem.length === 0">
      <view class="nodetails_img">
        <image src="/static/images/mine/gerenno.png" mode="widthFix" class="maxImage"></image>
      </view>
      <text>请添加宠物哦...</text>
    </view>

    <view class="new_pet">
      <button type="success" class="new_pet_button" @click="addnavPet">添加伙伴</button>
    </view>


    <!-- 弹框 -->
    <van-dialog use-slot title="确定删除宠物名片 ?" showCancelButton :show="longinshow" @confirm="onLoginConfirm"
      @close="onLoginClose" confirm-button-color="#000">
      <text class="dialogTetx">删除宠物名片会包括此宠物相关的所有数据</text>
    </van-dialog>
  </view>
</template>

<script>
  import {
    RecordUserId
  } from '@/api/user.js'
  import {
    removechives
  } from '@/api/new_pet.js'
  import {
    mapGetters,
    mapActions
  } from 'vuex'
  export default {
    data() {
      return {
        options: [{
          text: '删除', // 显示的文本内容
          style: {
            backgroundColor: '#FF6666' // 按钮的背景颜色
          }
        }],
        longinshow: false,
        // getRecordItem: [],
        removeIndex: 0
      };
    },
    onShow() {

    },
    computed: {
      ...mapGetters('m_user',['isLogin']),
      ...mapGetters('m_pet',['getRecordItem'])
    },
    methods: {
      ...mapActions('m_pet',['RemoveCategoryList']),
      bindClick(i) {
        this.longinshow = true
        // console.log(i)
        this.removeIndex = i
      },
      onLoginConfirm() {
        // console.log('555')
        this.longinshow = false
        this.RemoveCategoryList(this.getRecordItem[this.removeIndex].id)
      },
      onLoginClose(e) {
        this.longinshow = false
      },
      navTo(url) {
        uni.navigateTo({
          url: url
        })
      },
      addnavPet() {
        if (this.isLogin) {
          this.navTo('/subpkg/newrecord/newrecord')
        } else {
          uni.showToast({
            title: '请先登录',
            icon: 'none'
          })
        }
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #F7F7F7;
  }

  .container {
    padding: 34rpx 24rpx 100rpx;

    .my_pet {
      // padding: 0px 24rpx;
      margin-bottom: 30rpx;
      // width: 100%;
      box-sizing: border-box;
      height: 211rpx;
      border-radius: 20rpx;
      overflow: hidden;


      .my_pet_box {
        position: relative;
        height: 211rpx;
        background-color: #fff;
        padding: 0 47rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        // box-shadow: 0px 0px 17px rgba(0, 0, 0, 0.28);

        .my_pet_box_img {
          display: flex;
          align-items: center;

          .my_pet_box_title {
            height: 134rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            margin-left: 18rpx;

            .my_pet_box_title_top {
              display: flex;
              align-items: center;

              h1 {
                font-size: 40rpx;
              }

              image {
                width: 40rpx;
                height: 40rpx;
                margin-left: 13rpx;
              }
            }

            .my_pet_box_title_bottom {
              text {
                color: rgba(61, 61, 61, 0.5);
                font-size: 28rpx;
              }
            }
          }

          .my_pet_box_image {
            width: 130rpx;
            height: 130rpx;
            border-radius: 50%;
            overflow: hidden;
          }
        }

        .my_pet_box_edit {
          width: 35rpx;
          height: 38rpx;
        }
      }
    }

    /deep/ .van-dialog__header {
      padding: 100rpx 0 50rpx !important;
      font-size: 40rpx;
    }

    /deep/ .dialogTetx {
      display: inline-block;
      text-align: center;
      padding: 0 60rpx;
      font-size: 28rpx;
      letter-spacing: 2px;
      padding-bottom: 50rpx;
      color: rgba(61, 61, 61, 0.6);
    }

    /deep/ .uni-swipe_button-group {
      height: 211rpx;
    }

    .new_pet {
      position: fixed;
      bottom: 0;
      padding: 24rpx 24rpx 24rpx 0rpx;
      width: 750rpx;
      height: 128rpx;
      box-sizing: border-box;
      // background-color: #fff;


      .new_pet_button {
        width: 702rpx;
        height: 82rpx;
        background-color: #FDD338;
        border-radius: 6px;
        color: rgba(61, 61, 61, 1);
        line-height: 82rpx;
        border-radius: 82rpx;
        margin: 0 !important;
        font-size: 16px;
        font-weight: 500;
      }
    }

    .nodetails {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      padding-bottom: 128rpx;

      .nodetails_img {
        .maxImage {
          width: 184rpx;
              height: 108rpx;
        }
      }

      text {
        font-size: 36rpx;
        margin-top: 20rpx;
        color: rgba(61, 61, 61, 0.3);
      }
    }
  }
</style>
